<template>
	<view>
		<view class="top">
			<image src="../../static/top.jpg" mode=""></image>
		</view>
		<view class="writee">
			<text class="title1">
				<text class="shuxian">|</text>
				关于我们
			</text>
			<text class="content1">让世界充满爱·拥抱幸福</text>
		</view>
		<view class="bottomm">
			<view class="bottommm">
				<view class="bottomtop">
					<image src="../../static/red.jpg"></image>
				</view>
				<view class="wb">
					<br>
					<text>
						大爱同行公益联合会于2019年5月正式注册，为能够更好的对联合会中的党员和积极分子和会员进行教育与管理，
						并充分发挥基层党组织和党员在社会组织中的模范带头作用和为职工会员更好的服务。</text>
					并相继建立党支部、工会、妇联、关工委，在政府各单位的指导和联合下开展各类公益活动，
					把党和政府的好政策，第一时间普及给全县广大人民群众。
					其中禁毒防艾、疾病防控、税法普及、家庭矛盾调节、公益红娘等多个服务项目，
					获得有关部门和群众的好评。在联合会所有会员的共同努力下，
					未来发展的会更好的为人民群众服务，倡导正能量，为社会主义的建设，贡献一份力量！
					</text>
				</view>

			</view>|
		</view>
		<view class="writee">
			<text class="title1">
				<text class="shuxian">|</text> 关于我们
			</text>
			<text class="content1">让世界充满爱·拥抱幸福</text>
		</view>
		<!-- 这是第一个四格布局 -->
		<view class="bottommtow">
			<view class="ZKBO">
				<view class="bottommtow-one">
					<view class="bottommtoww">
						<image src="../../static/1.png" mode=""></image>
						<h3>角色1</h3>
						<text>自我介绍</text>
					</view>
					<view class="bottommtow-two">
						<view class="bottommtoww">
							<image src="../../static/2.jpg" mode=""></image>
							<h3>角色1</h3>
							<text>自我介绍</text>
						</view>
					</view>
				</view>
				<!-- 分割线竖排和横排的弹性布局融合使用 -->
				<view class="bottommtow-one">
					<view class="bottommtoww">
						<image src="../../static/1.png" mode=""></image>
						<h3>角色1</h3>
						<text>自我介绍</text>
					</view>
					<view class="bottommtow-two">
						<view class="bottommtoww">
							<image src="../../static/2.jpg" mode=""></image>
							<h3>角色1</h3>
							<text>自我介绍</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 这是第二个四格布局 -->
		<view class="bottommtow">
			<view class="ZKBO">
				<view class="bottommtow-one">
					<view class="bottommtoww">
						<image src="../../static/1.png" mode=""></image>
						<h3>角色1</h3>
						<text>自我介绍</text>
					</view>
					<view class="bottommtow-two">
						<view class="bottommtoww">
							<image src="../../static/2.jpg" mode=""></image>
							<h3>角色1</h3>
							<text>自我介绍</text>
						</view>
					</view>
				</view>
				<!-- 分割线竖排和横排的弹性布局融合使用 -->
				<view class="bottommtow-one">
					<view class="bottommtoww">
						<image src="../../static/1.png" mode=""></image>
						<h3>角色1</h3>
						<text>自我介绍</text>
					</view>
					<view class="bottommtow-two">
						<view class="bottommtoww">
							<image src="../../static/2.jpg" mode=""></image>
							<h3>角色1</h3>
							<text>自我介绍</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottommtow">
			<view class="bottommtow-one">
				<image src="../../static/1.png" mode=""></image>
			</view>
			<view class="bottommtow-two">
				<image src="../../static/2.jpg" mode=""></image>`
			</view>
		</view> -->
		<view class="writee">
			<text class="title1">
				<text class="shuxian">|</text>
				关于我们
			</text>
			<text class="content1">让世界充满爱·拥抱幸福</text>
		</view>
		<view class="bottomm">
			<view class="bottommm">
				<view class="bottomtop">
					<image src="../../static/ditu.png"></image>
				</view>
				<text class="cdtop">
					内容内容内容内容内容
				</text>
				<view class="cd">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</view>
				<view class="dhdz">
					<text>电话：0534-7901712</text> <text>地址：夏津县民政局婚姻登记处
						山东省德州市夏津县九龙街与县府前街交叉口北100米
					</text>

				</view>
				<view class="yby">
					<image src="../../static/110.jpg"></image>
					<image src="../../static/110.jpg"></image>
					<image src="../../static/110.jpg"></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// load() {
			// 	this.$refs.uReadMore.init();
			// }

		}
	}
</script>

<style>
	.title1 {
		font-weight: 700;
	}

	.top {
		width: 920rpx;
		height: 450rpx;
		background-color: pink;
	}

	image {
		width: 920rpx;
		height: 450rpx;
		background-repeat: no-repeat;
	}

	.writee {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		margin-top: 30rpx;
	}

	.content1 {
		color: rgb(134, 134, 134);
	}

	.bottomm {
		display: flex;
		justify-content: center;
	}

	.bottomm2 {
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.bottommm {
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		text-align: center;
		width: 700rpx;
		height: 1200rpx; 
		background-color: pink;
		border-radius: 40rpx;
		margin-right: 50rpx;
		margin-left: 50rpx;
		box-shadow: 0 0 10rpx 10rpx rgb(219, 219, 227);
		
	}

	.bottomtop {
		display: flex;
		justify-content: center;
		border-radius: 40rpx;
		/* background-color: red; */

		margin-left: 20rpx;
		margin-top: 20rpx;
	}


	.wb {
		width: 680rpx;
		height: 250rpx;
		border-radius: 40rx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.bottommtow {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 800rpx;
		/* 给这个弹性布局加了高才行撑得下盒子*/
	}

	.bottommtow-one {
		width: 360rpx;
		height: 290rpx;
		border-radius: 40rpx;
		background-color: deepskyblue;
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bottommtow-two {
		width: 360rpx;
		height: 290rpx;
		border-radius: 40rpx;
		background-color: deepskyblue;
		margin-right: 10rpx;
	}

	.bottomtop image {
		width: 720rpx;
		height: 440rpx;
		border-radius: 40rpx;
	}

	.bottommtow-one image {
		width: 360rpx;
		height: 290rpx;
	}

	.bottommtow-two image {
		width: 360rpx;
		height: 290rpx;
	}

	.bottommtoww {
		/* 这个弹性布局控制竖排照片 */
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.ZKBO {
		/* 这个弹性布局控制横排 */
		display: flex;
		justify-content: center;
	}

	.dhdz {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between/
	}

	.yby {
		display: flex;
		margin-top: 200rpx;
		justify-content: space-between;

	}

	.yby image {
		width: 220rpx;
		height: 180rpx;
	}

	.cd {
		margin-top: 40rpx;
		color: rgb(137, 137, 137);
	}

	.cdtop {
		margin-top: 20rpx;
	}

	.shuxian {
		color: red;
		margin-right: 10rpx;

	}
</style>
